<template>
  <div>
      <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter="getDataList()"
    >
      <!--<el-form-item label="申请时间:">
        <el-date-picker
          v-model="dateRange"
          type="datetimerange"
          range-separator="至"
          value-format="YYYY-MM-DD HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>-->
      <el-form-item label="查询周期:">
        <el-select
          v-model="dataForm.type"
          clearable
          placeholder="请选择周期"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="getDataList()"
        >
          查询
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="exportOrderStatistics()"
        >
          导出
        </el-button>
        <el-button @click="clearDatas()">
          清空
        </el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="20" class="content">
      <el-col :span="4"><div class="">
          <el-statistic
            group-separator=","
            :precision="0"
            :value="dataList.orderStatistics['2'].productNums"
            title="待发货商品数"
          ></el-statistic>
      </div></el-col>
      <el-col :span="4"><div class="">
          <el-statistic
            group-separator=","
            :precision="0"
            :value="dataList.orderStatistics['3'].productNums"
            title="待收货商品数"
          ></el-statistic>
      </div></el-col>
      <el-col :span="4"><div class="">
          <el-statistic
            group-separator=","
            :precision="0"
            :value="dataList.orderStatistics['4'].productNums"
            title="待评价商品数"
          ></el-statistic>
      </div></el-col>
      <el-col :span="4"><div class="">
          <el-statistic
            group-separator=","
            :precision="0"
            :value="dataList.orderStatistics['5'].productNums"
            title="成功商品数"
          ></el-statistic>
      </div></el-col>
      <el-col :span="4"><div class="">
          <el-statistic
            group-separator=","
            :precision="0"
            :value="dataList.orderStatistics['6'].productNums"
            title="失败商品数"
          ></el-statistic>
      </div></el-col>
      <el-col :span="4"><div class="">
      
      </div></el-col>
    </el-row>
    <el-row :gutter="20" class="content">
      <el-col :span="4"><div class="">
          <el-statistic
            group-separator=","
            :precision="2"
            :value="dataList.orderStatistics['2'].actualTotal"
            title="待发货商品金额"
          ></el-statistic>
      </div></el-col>
      <el-col :span="4"><div class="">
          <el-statistic
            group-separator=","
            :precision="2"
            :value="dataList.orderStatistics['3'].actualTotal"
            title="待收货商品金额"
          ></el-statistic>
      </div></el-col>
      <el-col :span="4"><div class="">
          <el-statistic
            group-separator=","
            :precision="2"
            :value="dataList.orderStatistics['4'].actualTotal"
            title="待评价商品金额"
          ></el-statistic>
      </div></el-col>
      <el-col :span="4"><div class="">
          <el-statistic
            group-separator=","
            :precision="2"
            :value="dataList.orderStatistics['5'].actualTotal"
            title="成功商品金额"
          ></el-statistic>
      </div></el-col>
      <el-col :span="4"><div class="">
          <el-statistic
            group-separator=","
            :precision="2"
            :value="dataList.orderStatistics['6'].actualTotal"
            title="失败商品金额"
          ></el-statistic>
      </div></el-col>
      <el-col :span="4"><div class="">
      
      </div></el-col>
    </el-row>

    <el-row :gutter="20" class="content">
      <el-col :span="6"><div class="">
          <el-statistic
            group-separator=","
            :precision="0"
            :value="dataList.orderRefundStatistics['0'].goodsNum"
            title="退款处理中数量"
          ></el-statistic>
      </div></el-col>
      <el-col :span="6"><div class="">
          <el-statistic
            group-separator=","
            :precision="0"
            :value="dataList.orderRefundStatistics['1'].goodsNum"
            title="退款成功数量"
          ></el-statistic>
      </div></el-col>
      <el-col :span="6"><div class="">
          <el-statistic
            group-separator=","
            :precision="0"
            :value="dataList.orderRefundStatistics['-1'].goodsNum"
            title="退款失败数量"
          ></el-statistic>
      </div></el-col>
      <el-col :span="6"><div class="">
      </div></el-col>
    </el-row>

    <el-row :gutter="20" class="content">
      <el-col :span="6"><div class="">
          <el-statistic
            group-separator=","
            :precision="2"
            :value="dataList.orderRefundStatistics['0'].refundAmount"
            title="退款处理中金额"
          ></el-statistic>
      </div></el-col>
      <el-col :span="6"><div class="">
          <el-statistic
            group-separator=","
            :precision="2"
            :value="dataList.orderRefundStatistics['1'].refundAmount"
            title="退款成功金额"
          ></el-statistic>
      </div></el-col>
      <el-col :span="6"><div class="">
          <el-statistic
            group-separator=","
            :precision="2"
            :value="dataList.orderRefundStatistics['-1'].refundAmount"
            title="退款失败金额"
          ></el-statistic>
      </div></el-col>
      <el-col :span="6"><div class="">
      </div></el-col>
    </el-row>


      <el-row :gutter="20" class="content">
      <el-col :span="6"><div class="">
          <el-statistic
            group-separator=","
            :precision="2"
            :value="dataList.orderRewardStatistics['reward2YuanMoney'].money"
            title="老上级奖励"
          ></el-statistic>
      </div></el-col>
      <el-col :span="6"><div class="">
          <el-statistic
            group-separator=","
            :precision="2"
            :value="dataList.orderRewardStatistics['level1'].money"
            title="一级奖励"
          ></el-statistic>
      </div></el-col>
      <el-col :span="6"><div class="">
          <el-statistic
            group-separator=","
            :precision="2"
            :value="dataList.orderRewardStatistics['level2'].money"
            title="二级奖励"
          ></el-statistic>
      </div></el-col>
      <el-col :span="6"><div class="">
          <el-statistic
            group-separator=","
            :precision="2"
            :value="dataList.orderRewardStatistics['level3'].money"
            title="三级奖励"
          ></el-statistic>
      </div></el-col>
    </el-row>
  </div>
</template>

<script setup>
import { isAuth } from "@/utils";


const dataList = ref({
  "orderStatistics": {
			"2": {
				"actualTotal": 0,
				"productNums": 0,
				"status": 2
			},
			"3": {
				"actualTotal": 0,
				"productNums": 0,
				"status": 3
			},
			"4": {
				"actualTotal": 0,
				"productNums": 0,
				"status": 4
			},
			"5": {
				"actualTotal": 0,
				"productNums": 0,
				"status": 5
			},
			"6": {
				"actualTotal": 0,
				"productNums": 0,
				"status": 6
			}
		},
		"orderRefundStatistics": {
			"0": {
				"returnMoneySts": 0,
				"goodsNum": 0,
				"refundAmount": 0
			},
			"1": {
				"returnMoneySts": 1,
				"goodsNum": 0,
				"refundAmount": 0
			},
			"-1": {
				"returnMoneySts": 0,
				"goodsNum": 0,
				"refundAmount": 0
			}
		},
		"orderRewardStatistics": {
			"reward2YuanMoney": {
				"money": 0,
				"type": "reward2YuanMoney"
			},
			"level1": {
				"money": 0,
				"type": "level1"
			},
			"level3": {
				"money": 0,
				"type": "level3"
			},
			"level2": {
				"money": 0,
				"type": "level2"
			}
		}
});
const dataListLoading = ref(false);

const dataForm = reactive({
  type: 2
})

const options = [{
  value: 0,
  label: '当天'
},
{
  value: 1,
  label: '当周'
},
{
  value: 2,
  label: '当月'
},
{
  value: 3,
  label: '当季度'
},{
  value: 4,
  label: '当年'
}]

/**
 * 获取数据列表
 */
const getDataList = () => {
  dataListLoading.value = true;
  http({
    url: http.adornUrl("/order/financeStatistics/getOrderStatistics"),
    method: "get",
    params: http.adornParams(
      Object.assign(
        {
          
        },
        {
          type:dataForm.type
        }
      )
    ),
  }).then(({ data }) => {
    dataList.value = data;
    console.log(dataList.value);
    dataListLoading.value = false;
  });
};

onMounted(() => {
  getDataList()
})


/**
 * 条件查询
 */
const onSearch = () => {
  getDataList();
};

/**
 * 清除数据
 */
const clearDatas = () => {
  dataForm.type = 0;//当天
};

const exportOrderStatistics = () => {
  http({
    url: http.adornUrl('/order/financeStatistics/exportOrderStatistics'),
    method: 'get',
    params: http.adornParams({
      type:dataForm.type
    }),
    responseType: 'blob' // 解决文件下载乱码问题
  })
    .then(({ data }) => {
      const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
      const fileName = '导出订单和奖励统计.xlsx'
      const elink = document.createElement('a')
      if ('download' in elink) { // 非IE下载
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else { // IE10+下载
        navigator.msSaveBlob(blob, fileName)
      }
    })
}

</script>
<style  scoped>
.content{
  margin-bottom: 10px;
}
.content >>> .el-statistic{
  background-color: aliceblue;
    border-radius: 10px;
    text-align: center;
}
</style>